
<template>
<div class="comment-container">
<h4>发表评论</h4>
<textarea placeholder='请输入评论内容最多120字' maxlength='120' v-model='msg'></textarea>
<mt-button type='primary' size='large' @click='publishComment'>发表评论</mt-button>
 <div class="comment-list" v-for="(item,i) in comments" :key='item.add_time'>
      <div class="comment-item">
        <div class="comment-title">第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dateFormat}}</div>
        <div class="comment-content">{{item.content}}</div>
      </div>
    </div>   
<mt-button type='danger' size='large' plain @click='loadingMore'>加载更多</mt-button>
</div>
</template>
<script>
import {toast} from 'mint-ui'
   export default{
       data(){//data上面的数据只要被修改了页面就会重绘
           return{
            pageindex:1,//默认展示第一页数据
            comments:[],
            msg:'',
           }
       },
       created(){
        this.getCommentdata()
       },
       methods:{
           //每次调用方法getCommentdata是把当前this.comments里的内容拼接上请求来的内容
           //每次调用loadingMore方法是去获取下一页的数据并且拼接到当前的this.comments里
           //每次调用publishComment方法是把用户评论的内容存到数据库中，如果调用getCommentdata方法来取的话会把当前的this.comments里内容例如[{1,2},{3,4}]
           //取过来的内容为[{3,4,用户评论的内容}]而方法getCommentdata把两个数字一拼接为[{1,2},{3,4},{3,4,用户评论的内容}]所以为1和2的两项内容就重复了只是
           //多出用户的评论内容，所以这里不能直接调用getCommentdata方法，只能直接往本地的this.comments的前面添加一项用户的评论

     getCommentdata(){
          this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(result=>{//这个接口就是从数据库取数据
              //props上的数据直接通过this.id获取
            //  console.log(result)
             if(result.body.status==0){
                // this.comments=result.body.message 
                
              //console.log(result.body.message)                
                this.comments=this.comments.concat(result.body.message)
             }else{
                 toast('失败')
             }
         })
    },
    loadingMore(){
        this.pageindex++
        this.getCommentdata()//每次只是拿到对应页面的数据来拼接上之前的this.comments数组
    },
    publishComment(){
        if(this.msg.trim().length<=0){
            return toast('评论内容不能为空')
        }
        this.$http.post('api/postcomment/'+this.id,{content:this.msg.trim()}).then(result=>{
            //这个接口其实就是往数据库this.id对应的这张表中存数据，而这张表中的数据以json对象的形式展示在后台，每次添加都是往json的前面添加unshift
            if(result.body.status==0){
                //如果调用this.getCommentdata()的话得到的this.comments是之前this.comments加上当前页面对应result.body.message拼接出来的this.comments
                //这里直接在本地操作this.comments就行（有些时候就是要直接在本地操作数据更好）
                this.comments.unshift({//往当前数组的前面添加用户的评论
                    add_time:Date.now(),
                    content:this.msg,
                    user_name:'匿名用户'
                })
            }else{
                toast('发表评论失败')
            }
        })
    },
       },
       props:['id']//父组件给子组件传值
   } 
</script>
<style lang="scss" scoped>
    .comment-container {
  textarea {
    margin: 0;
    font-size: 14px;
  }

  .comment-list {
    .comment-item {
      font-size: 14px;
      .comment-title {
        background-color: #ccc;
        line-height: 30px;
      }
      .comment-content {
        text-indent: 2em;
        line-height: 35px;
      }
    }
  }
}
</style>